<%@ page language="java" contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="zh" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="zh" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <jsp:include page="/common/common.jsp"/>
</head>
<body class="page-header-fixed page-sidebar-fixed">
<jsp:include page="/common/header.jsp"/>
<script src="${path}/assets/plugins/ueditor/third-party/highcharts/highcharts.js"></script>
<script src="${path}/assets/plugins/ueditor/third-party/highcharts/modules/exporting.js"></script>
<div class="clearfix"></div>
<div class="page-container">
    <div class="page-sidebar-wrapper">
        <jsp:include page="/common/menu.jsp"/>
    </div>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet box purple">
                        <div class="portlet-title">
                            <div class="caption"><i class="fa fa-file-text-o"></i>url分析</div>
							<div class="actions btn-set">
                                    <a href="javascript:history.go(-1);" class="btn default"><i
                                            class="fa fa-angle-left"></i> 返回${total }</a>
                                </div>
                        </div>
                        <div class="portlet-body">
                            <div id="container" style="min-width: 300px; height: 400px; "></div>
                            <!--  
                            <div>
                                <div id="pie1" style="min-width:33%;height:300px;float:left"></div>
                                <div id="pie2" style="min-width:33%;height:300px;float:left"></div>
                                <div id="pie3" style="min-width:33%;height:300px;float:left"></div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<jsp:include page="/common/footer.jsp"/>

<!-- END PAGE LEVEL SCRIPTS -->

<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'url_top20'
        },
        xAxis: {
            categories: [
                'e.163.com',
                'news.163.com',
                '192.168.0.169',
                'comment.news.163.com',
                'pos.baidu.com',
                'hot.163.com',
                'x.jd.com',
                'tbmsg.baidu.com',
                'tieba.baidu.com',
                'www.biquge.la',
                'c.pingba.qidian.com',
                'www.gov.cn',
                'img1.126.net',
                'g.163.com',
                'www.biquge.tw',
                'temp.163.com',
                'fa.163.com',
                'img.88rpg.net',
                'house.163.com',
                'www.qidian.com'
            ],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [
            {
                name: '单位(%)',
                data: [70, 100, 140, 60, 50, 30, 150, 310, 60, 30, 20, 30, 150, 70, 30, 60, 30, 50 , 50 , 40],
                dataLabels: {// 显示值
                    enabled: true,
                    color: '#ff9933',
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function () {
                        return this.y + '%';
                    }
                }
            }
        ],
        colors: [
            '#ffcc00'
        ]
    });

    // 客户来源分布
    $('#pie1').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '客户来源分布'
        },
        tooltip: {
            pointFormat: ' <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                },
                showInLegend: true
            }
        },
        series: [
            {
                type: 'pie',
                data: [
                    ['公司提供', 45.0],
                    ['转介绍', 26.8],
                    {
                        name: '自行开发',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    }
                ]
            }
        ],
        colors: [
            '#ffff00',
            '#ff00ff',
            '#6600ff'
        ]
    });

    // 性别比例
    $('#pie2').highcharts({
        chart2: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '性别比例'
        },
        tooltip: {
            pointFormat: ' <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                },
                showInLegend: true
            }
        },
        series: [
            {
                type: 'pie',
                data: [
                    ['男', 26.8],
                    {
                        name: '女',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    }
                ]
            }
        ],
        colors: [
            '#6600ff',
            '#ff00ff'
        ]
    });

    // 年龄（单位：岁）
    $('#pie3').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '年龄（单位：岁）'
        },
        tooltip: {
            pointFormat: ' <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                },
                showInLegend: true
            }
        },
        series: [
            {
                type: 'pie',
                data: [
                    ['13 - 29', 45.0],
                    {
                        name: '30 - 39',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['>= 50', 26.8],
                    ['40 - 49', 26.8]
                ]
            }
        ]
    });

});

</script>